<template>
  <div class="photo">
    <!--1. 顶部导航栏 -->
    <van-nav-bar
      fixed
      :border=false
      title="门店相册"
      @click-left="onClickLeft"
      @click-right="showShare = true"
    >
    <!-- 1.顶部导航栏插槽 -->
    <template #left>
      <van-icon name="arrow-left" color="black"/>
    </template>
    <template #right>
      <img src="../assets/detail/share.png" width="15px">
    </template>
    </van-nav-bar> 
    <!-- 1.1导航栏分享功能 -->
    <van-share-sheet v-model="showShare" :options="options"/>

    <!-- 内容开始 -->
    <div class="content">
      <div class="list" v-for="(obj,index) in this.textImg" :key="index">
        <h4 v-text="obj.text"></h4>
        <div>
          <img :src="obj.img" width="100%">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { 
      //1.1 分享功能栏
      showShare: false,
      options: [
        {
          name: '微信',
          icon: 'wechat',
        },
        {
          name: '微信朋友圈',
          icon: 'wechat-moments',
        },
      ],
      //2.组件传参
      textImg:[],
    }
  },
  methods:{
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  mounted(){
    //拼取数据渲染页面
    let imgArr=this.$route.query.img.split(',').slice(0,4);
    let textArr=['VR(1)','视屏(1)','户型图(1)','卧室(1)','其它']
    for(let i = 0; i　< imgArr.length; i++) {
      let data ={};
      data.text = textArr[i];
      data.img = imgArr[i];
      this.textImg.push(data);
    }
  }
}
</script>
<style scoped>
.content{
  box-sizing: border-box;
  padding: 48px 15px 60px;
}
.list{
  width: 100%;
  height: 280px;
}
.list h4{
  margin: 10px 0;
}
.list div{
  width: 100%;
  height: 250px;
  border-radius: 6px;
  overflow: hidden;
}
</style>